<template>
    <div>
        <h1>侦听器</h1>
        <div>

            <!-- <input v-model="question" @change="handlequestion" type="text" placeholder="请输入问题"> -->
            <input :disabled="isDisabled" v-model="question" type="text" placeholder="请输入问题">
            <p>问题的结果: {{ answer }}</p>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo314'
}
</script>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import { debounce } from 'lodash'

// 问题
const question = ref('')

// 问题的答案
const answer = ref('')

// 是否禁用
const isDisabled = ref(false)

// 数据响应的类型接口
interface ResData {
    /**
     * 返回的数据
     */
    data: any
    /**
     * 响应的数据
     */
    msg: string
    /**
     * 接口状态码
     * @description 400:失败 200: 代表请求成功 500: 代表服务器挂了
     */
    code: number | string
}

// 处理问题
// const handlequestion = () => {
//     console.log(question.value);
// }

// 模拟后端请求数据
function fetchDataDemo() {
    return new Promise<ResData>((resolve, reject) => {
        setTimeout(() => {
            resolve({
                data: '你的问题我现在还无法回答，等过两天再问我，这几日我在疯狂的吃数据！',
                msg: 'ok',
                code: 200
            })
        }, 1000);
    })
}

// 
watch(question, debounce(async (newValue, oldValue) => {
    console.log("newValue:", newValue, 'oldValue:', oldValue)
    // 启用 input禁用
    isDisabled.value = true
    //获取接口响应的数据，并把部分数据解构出来
    const { data } = await fetchDataDemo()
    // 把回答的问题数据赋值给响应变量
    answer.value = data
    // 取消input禁用
    isDisabled.value = false

    // try {
    //     fetchDataDemo().then((res) => {
    //         console.log('res:', res);
    //         answer.value = res.data
    //     })
    // } catch (error) {
    //     // console.log();
    //     answer.value = '接口数据请求error'
    // }

}, 1000)
)


</script>

<style lang="ts">

</style>